<template>
    <div>
       <div class="loginform">
           <div class="logintop">
               <div @click="isusername" :class="{blue:isuser,bold:isuser,hand:true}">账户密码登陆</div>|
               <div @click="isphone" :class="{blue:!isuser,bold:!isuser,hand:true}">动态验证码登陆</div>
           </div>
           <div class="logincontent">
               <el-input v-model="phone" placeholder="请输入手机号"></el-input>
               <el-input v-model="password" v-if="isuser" placeholder="请输入密码"></el-input>
                <div class="tupianyanzheng">
                    <el-input v-model="photocheck" placeholder="请输入图片验证码"></el-input>
                    <div :class="[isuser?'photocheckd':'phonecheckdp']" class="hand" @click="shuaxinyanzheng"><img :src="'http://39.108.122.107:1111/api/getImgCode?imgToken='+phototoken"></div>
               </div>
               <el-input class="phonecheckuang" v-model="phonecheck" v-if="!isuser" placeholder="请输入手机验证码"></el-input>
               <el-button v-if="!isuser" @click="codeSignIn" :disabled="iswait">{{iswait?'重新发送'+waittime+'s':'发送验证码'}}</el-button>
               <div class="zidonglongin">
                   <el-checkbox v-model="checked" size="mini"></el-checkbox><span class="zidongbtn">自动登陆</span>
                   <nuxt-link to="./login/forgot_password">忘记密码</nuxt-link>
                   <nuxt-link to="./login/register" class="fright">免费注册</nuxt-link>
               </div>
               <el-button class="loginbtn" @click="login">登陆</el-button>
           </div>
        </div> 
        <el-dialog
            title="提示"
            :visible.sync="dialogVisible"
            width="30%">
            <span>{{text}}</span>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import axios from 'axios'
import {gettoken} from '@@/assets/commen.js'
export default {
    layout:'login',
    data() {
        return {
            iswait:false,
            waittime:60,
            dialogVisible:false,
            text:'图片验证码错误',
            yanzhengphoto:'',
            isuser: true,
            phone:'',
            phonecheck:'',
            photocheck:'',
            checked: true,
            phototoken:'',
            password:'',
        }
    },
    methods: {
        isusername(){
            this.isuser = true
        },
        isphone(){
            this.isuser = false
        },
        codeSignIn(){
            axios.get('http://39.108.122.107:1111/api/checkImgCode',{params:{    //发送图片验证码
                imgToken:this.phototoken,
                imgCode:this.photocheck
            }}).then((res)=>{
                console.log(res,1111111)
                if(res.data.message == 'success'){
                    axios.get('http://39.108.122.107:1111/api/smsVerifCode',{params:{        //发送手机验证码
                        phone:this.phone,
                        code_type: 'codeSignIn'
                    }}).then((result)=>{
            // ========================验证码发送,再次发送需要等待60s===========================
                    this.iswait = true                          
                    var mytime = setInterval(()=>{
                        if(this.waittime == 0){
                            this.iswait = false
                            this.waittime = 60
                            clearInterval(mytime)
                        }
                        this.waittime -= 1
                    },1000)
                    console.log(result)
            //====================================================================================
                    }).catch((err)=>{
                        console.log(err.response,1111)
                        this.text = err.response.data.message
                        this.dialogVisible = true
                    })
                }
            }).catch((err)=>{
                console.log(err.response,2222)
                this.text = err.response.data.message
                this.dialogVisible = true
            })
        },
        login(){
            if(this.isuser){
                axios.post('http://39.108.122.107:1111/api/signIn',{
                    phone:this.phone,
                    password:this.password,
                    imgCode:this.photocheck,
                    imgToken:this.phototoken
                }).then((res)=>{
                    if(res.data.access_token){
                        localStorage.setItem('access_token',res.data.access_token)
                        this.$axios.post('/me',{},{headers:{'Authorization':'Bearer'+res.data.access_token}}).then(result => {
                            this.$store.commit('setuserdata',result.data.data)
                            localStorage.setItem('userdata',result.data.data)
                            console.log('ok')
                        this.$router.push('./')
                        })
                    }else{
                        console,log(res,'失败')
                    }
                }).catch((err)=>{
                    console.log(err.response,'登陆失败')
                    this.text = err.response.data.message
                    this.dialogVisible = true
                })
            }else{
                axios.post('http://39.108.122.107:1111/api/codeSignIn',{
                    phone:this.phone,
                    smsCode:this.phonecheck,
                }).then((res)=>{
                    console.log(res)
                }).catch((err)=>{
                    console.log(err.response)
                    this.text = err.response.data.message
                    this.dialogVisible = true
                })
            }
            
        },
        shuaxinyanzheng(){
            this.phototoken = Math.random()
        }
    },
    created() {
        this.phototoken = Math.random()
    },
}
</script>

<style lang="css" scoped>
.hand:hover{
    cursor: pointer;
}
.loginform{
    position: relative;
    width:420px;
    height:400px;
    background:rgba(255,255,255,1);
    box-shadow:0px 4px 8px 0px rgba(0, 0, 0, 0.11);
    border-radius:10px;
    margin: 92px auto;
}
 .logincontent .phonecheckuang.el-input{
    width:240px;
    height:38px;
    margin-right: 0;
}
.loginform .logintop{
    width: 100%;
    height: 58px;
    border-bottom: 1px #d2d2d2 solid;
    font-weight:300;
    color:rgba(36,36,36,1);
}
.loginform .logintop div:nth-child(1){
    display: inline-block;
    margin: 20px 0;
    padding: 0 50px;
    font-size:18px;
}
.red{
    font-weight:400;
    color:rgba(222,13,13,1);
}
.loginform .logintop div:nth-child(2){
    display: inline-block;
    margin: 20px 30px;
    font-size:18px;
}
.logincontent .el-input {
    width:360px;
    height:38px;
    border-radius:4px;
    margin: 20px 38px;
}
.logincontent .tupianyanzheng .el-input{
    width:240px;
    height:38px;
    border-radius:4px;
}
.photocheckd{
    width: 106px;
    height: 38px;
    position: absolute;
    left: 284px;
    top: 234px;
}
.phonecheckdp{
    width: 106px;
    height: 38px;
    position: absolute;
    left: 284px;
    top: 157px;
}
.zidonglongin{
    margin: 0 38px;
    font-size:12px;
    font-weight:300;
    color:rgba(36,36,36,1);
}
.fright{
    float: right;
}
.zidongbtn{
    margin-left: -23px;
    margin-right: 20px;
}
.loginbtn.el-button{
    width:360px;
    height:38px;
    background:#5141ED;
    border-radius:3px;
    color: #fff;
    margin: 25px 38px;
}
</style>